<template>
  <div class="comment">
    <p class="comment-title">
      <span>评论</span>
      <span>({{datalength}})</span>
    </p>
    <div class="commentMyinfo">
      <img :src="myuser.user_img" alt="" v-if="myuser" />
      <img src="@/assets/default.jpeg" alt="" v-else />
      <input v-model="comcontent" ref="Postipt" type="text" placeholder="说点啥吧" />
      <button class="button" @click="commentInput">发表</button>
    </div>
  </div>
</template>
<script>
export default {
  props:['datalength'],
  data() {
    return {
      myuser: null,
      comcontent: null,
    };
  },
  methods: {
    async myUserinfo() {
      const res = await this.$http.get("/user/" + localStorage.getItem("id"));
      this.myuser = res.data[0];
    },
    commentInput() {
      if (
        !this.myuser ||
        !localStorage.getItem("token") ||
        !localStorage.getItem("id")
      ) {
        this.$msg.fail("请先登录");
        return;
      }
      this.$emit('Postcomment',this.comcontent)
      this.comcontent = ''
    },
    focusIpt(){
      this.$refs.Postipt.focus()
    }
  },
  created() {
    if (localStorage.getItem("token")) {
      this.myUserinfo();
    }
  },
};
</script>
<style lang="scss">
.comment {
  width: 100%;
  padding: 4.167vw 2.778vw 0 2.778vw;
  .comment-title {
    span:nth-child(2) {
      color: #aaa;
      margin: 2.778vw;
    }
  }
  .commentMyinfo {
    padding: 10.001px 0;
    display: flex;
    img {
      height: 8.944vw;
      width: 32.198px;
      border-radius: 50%;
    }
    input {
      outline: none;
      border: 0;
      background-color: #f4f4f4;
      border-radius: 3.611vw;
      font-size: 11.999px;
      padding: 0 5.556vw 0 4.167vw;
      margin-left: 10.001px;
    }
    .button {
      outline: none;
      border: 0;
      margin-left: 2.778vw;
      border-radius: 3.333vw;
      color: white;
      background-color: #fb7299;
      font-size: 3.333vw;
      padding: 0 4.167vw;
    }
  }
}
</style>